<template>
  <div>
    <el-input v-model="input" v-on:click.native="showModal" readonly="readonly" placeholder="请选择数量"  ></el-input>
    <el-drawer
      title="请选择数量"
      :visible.sync="drawer"
      :direction="direction"
      size="434px"
      class="selectnum"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-radio-group v-model="radio" class="my-radio">
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <td>
                    <el-radio :label="5">5</el-radio>
                  </td>
                  <td>
                    <el-radio :label="10">10</el-radio>
                  </td>
                  <td>
                    <el-radio :label="15">15</el-radio>
                  </td>
                  <td>
                    <el-radio :label="20">20</el-radio>
                  </td>
                  <td>
                    <el-radio :label="25">25</el-radio>
                  </td>
                  <td>
                    <el-radio :label="30">30</el-radio>
                  </td>
                  <td>
                    <el-radio :label="50">50</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="75">75</el-radio>
                  </td>
                  <td>
                    <el-radio :label="100">100</el-radio>
                  </td>
                  <td>
                    <el-radio :label="125">125</el-radio>
                  </td>
                  <td>
                    <el-radio :label="150">150</el-radio>
                  </td>
                  <td>
                    <el-radio :label="200">200</el-radio>
                  </td>
                  <td>
                    <el-radio :label="250">250</el-radio>
                  </td>
                  <td>
                    <el-radio :label="300">300</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="350">350</el-radio>
                  </td>
                  <td>
                    <el-radio :label="400">400</el-radio>
                  </td>
                  <td>
                    <el-radio :label="450">450</el-radio>
                  </td>
                  <td>
                    <el-radio :label="500">500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="600">600</el-radio>
                  </td>
                  <td>
                    <el-radio :label="700">700</el-radio>
                  </td>
                  <td>
                    <el-radio :label="800">800</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="900">900</el-radio>
                  </td>
                  <td>
                    <el-radio :label="1000">1000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="1200">1200</el-radio>
                  </td>
                  <td>
                    <el-radio :label="1500">1500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="1600">1600</el-radio>
                  </td>
                  <td>
                    <el-radio :label="1750">1750</el-radio>
                  </td>
                  <td>
                    <el-radio :label="1800">1800</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="2000">2000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="2400">2400</el-radio>
                  </td>
                  <td>
                    <el-radio :label="2500">2500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="2800">2800</el-radio>
                  </td>
                  <td>
                    <el-radio :label="3000">3000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="3550">3550</el-radio>
                  </td>
                  <td>
                    <el-radio :label="4000">4000</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="4500">4500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="5000">5000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="5500">5500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="6000">6000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="6500">6500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="7000">7000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="7500">7500</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="8000">8000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="8500">8500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="9000">9000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="9500">9500</el-radio>
                  </td>
                  <td>
                    <el-radio :label="10000">10000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="11000">11000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="12000">12000</el-radio>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-radio :label="13000">13000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="14000">14000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="15000">15000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="16000">16000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="17000">17000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="18000">18000</el-radio>
                  </td>
                  <td>
                    <el-radio :label="19000">19000</el-radio>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-radio-group>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button
            type="primary"
            @click="submitNum"
          >确 定</el-button>
          <el-button @click="cancelForm">关 闭</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 5,
      drawer: false,
      direction: "ttb",
      table: false,
      form: {},
      timer: null,
      input:"",
    };
  },
  methods: {
    showModal: function () {
      this.drawer = true;
    },
    submitNum(){
       this.input=this.radio
       this.$emit('orderCount',this.input)
       this.drawer = false
    },
    cancelForm() {
      this.drawer = false
   
    },
  }
};
</script>

<style>
.demo-drawer__content .el-form {
  margin-top: 10px;
}

div .selectnum {
  width: 630px;
  height: 410px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}

div .selectnum .el-drawer__header span {
  visibility: hidden;
}

div .selectnum .el-drawer__header {
  margin: 0px;
  padding-top: 0px;
  border-bottom: 1px solid #e5e5e5;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table {
  max-width: 100%;
  margin-bottom: 20px;
  border-spacing: 0;
  border-collapse: collapse;
}
.my-radio,
.table {
  width: 100%;
}

.table > tbody > tr > td {
  padding: 8px;
  line-height: 10px;
  vertical-align: top;
  border: 1px solid #ddd;
  text-align: left;
}

.demo-drawer__content {
  padding: 15px;
  padding-top: 5px;
}
</style>